<template>
  <div>
    <ElRow :gutter="20">
      <ElCol
        v-for="(item, index) in droneList"
        :key="index"
        :span="getSpan(index)"
      >
        <div class="drone-list">
          <p
            class="drone-title"
            :class="{ 'drone-title-8': getSpan(index) === 8 }"
            @click="navToClick"
          >
            <span>{{ item.Id }}</span>
            <span class="drone-sty"> |</span>
            <span>{{ item.name }}</span>
            <span class="drone-sty"> |</span>
            <span>{{ item.frequency }}</span>
            <span class="drone-sty"> |</span>
            <span :style="{ display: getSpan(index) == '8' ? 'none' : '' }">{{
              item.distance
            }}</span>
          </p>
          <video class="drone-video" :id="'video-' + index" controls></video>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { router } from '#/router';
import { openWindow } from '@vben/utils';
// import Hls from 'hls.js';
const props = defineProps({ droneList: Array, changeViewId: Number });
const router = useRouter();
const getSpan = (index) => {
  switch (props.changeViewId) {
    case 1:
      return 24;
    case 2:
      return 12;
    case 3:
      return index === 0 ? 16 : 8;
    default:
      return 8;
  }
};
let hlsInstances: Record<number, Hls> = {};

const navToClick = () => {
  // let nav = '/dronemonitoringDetail';
  router.push({
    name: 'TaskschedulingDetail',
    // query: {
    //   id: row.id,
    // },
  });
};
onMounted(() => {
  // props.droneList.forEach((item, index) => {
  //   const videoElement = document.getElementById(`video-${index}`);
  //   if (videoElement && Hls.isSupported()) {
  //     const hls = new Hls();
  //     hls.loadSource(item.streamUrl); // 假设每个无人机项都有一个 streamUrl 属性
  //     hls.attachMedia(videoElement);
  //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
  //       videoElement.play();
  //     });
  //     hlsInstances[index] = hls;
  //   } else if (
  //     videoElement &&
  //     videoElement.canPlayType('application/vnd.apple.mpegurl')
  //   ) {
  //     videoElement.src = item.streamUrl; // 假设每个无人机项都有一个 streamUrl 属性
  //     videoElement.addEventListener('canplay', function () {
  //       videoElement.play();
  //     });
  //   }
  // });
});
onBeforeUnmount(() => {
  // Object.values(hlsInstances).forEach((hls) => {
  //   hls.destroy();
  // });
});
</script>

<style lang="scss" scoped>
.drone-list {
  position: relative;
  align-items: center;
  height: 320px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #fff;

  .drone-title {
    position: absolute;
    z-index: 2;
    margin-left: 70px;

    span {
      height: 52px;
      line-height: 52px;
    }

    .drone-sty {
      margin: 0 10px;
    }
  }

  .drone-title-8 {
    margin-left: 20px;
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
    white-space: nowrap; /* 不换行 */
  }
}

.drone-video {
  width: 100%;
  height: 300px;
}
</style>
